<template>
	<div style="height: 100%;">
		<div class="bannerContainer">
			<swiper :options="swiperOption"  ref="mySwiper">
			    <swiper-slide v-for="banner in banners" @mouseenter.native="stopPlay()" @mouseleave.native="play()">
			       	<img class="bannerImg" v-bind:src="banner">
			   	</swiper-slide>
			    <div v-show="isPagination" class="swiper-pagination" slot="pagination"></div>
			    <!-- 如果需要导航按钮 -->
	    		<div v-show="isButtonPrevAndButtonNext" class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
	    		<div v-show="isButtonPrevAndButtonNext" class="swiper-button-next swiper-button-white" slot="button-next"></div>
			    <div v-show="isScrollbar" class="swiper-scrollbar" slot="scrollbar"></div>
			</swiper>
		</div>
	</div>
</template>

<style>
.bannerContainer{
	width: 100%;
	height: 100%;		
}
.swiper-container{
	height: 100%;
	margin: 0px auto;
    position: relative;
    perspective: 1200px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.swiper-wrapper{
	
}
.bannerImg{
	width: 100%;
	height: 100%;
}
</style>

<script type="text/ecmascript-6">
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		props : {
			banners : {
				type : Array
			},
			isButtonPrevAndButtonNext : {
				type : Boolean
			},
			isScrollbar : {
				type : Boolean
			},
			isPagination : {
				type : Boolean
			}
		},
		data() {
			return {
		        swiperOption: {
		          	notNextTick : true, 
		          	speed : 600,
		          	grabCursor : true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
//		          	autoplay : 4000,     // 自动播放轮播
		          	loop : true,       // 循环播放
					effect : 'cube',
//					slidesPerView: 3,
//					centeredSlides: true,
					autoplay: {
				    	delay: 3000,
				    	stopOnLastSlide: false,
				    	disableOnInteraction: false,
				    },
//		          	pagination : { //分页
//		          		el : '.swiper-pagination',
//		          		clickable : true,
//		          		type : "bullets"   //bullets 圆点（默认）, 'fraction' 分式 ,'progressbar' 进度条, 'custom' 自定义
//		          	},
//		          	navigation: {  //左右箭头
//					    nextEl: '.swiper-button-prev',
//					    prevEl: '.swiper-button-next',
//					},
//					scrollbar: {  // 进度条
//					    el : '.swiper-scrollbar'
//					}
		        }
		   };
		},
		components : {
			swiper,  
            swiperSlide  
		},
		computed : {
			mySwiper() {  
              return this.$refs.mySwiper.swiper;  
            }
		},
		mounted : function () {
			
		},
		methods: {
			stopPlay () {
//				this.mySwiper.autoplay.stop();
			},
			play () {
//				this.mySwiper.autoplay.start();
			}
			
		}
	}
</script>
